<template>
	<view class="container">
		<NavBar title="整改"/>
		<scroll-view scroll-y class="list">
			<view class="info-list">
				<view class="info-item">
				  <text class="info-label">排查日期</text>
				  <text class="info-value">{{monitorDetail.checkDate}}</text>
				</view>
				<view class="info-item">
				  <text class="info-label text-size">整改责任人</text>
				  <text class="info-value text-size">{{monitorDetail.changeName}}</text>
				</view>
				<view class="info-item">
				  <text class="info-label">联系方式</text>
				  <text class="info-value">{{monitorDetail.changeMobile}}</text>
				</view>
				<view class="info-item textarea">
				  <text class="info-label ">隐患描述</text>
				  <uv-textarea v-model="monitorDetail.dangerDesc" disabled placeholder="请输入内容"></uv-textarea>
				</view>
				<view class="info-item">
				  <text class="info-label">等级</text>
				  <text class="info-value">{{monitorDetail.dangerLevel}}</text>
				</view>
				
				<view class="info-item">
				  <text class="info-label">整改前照片</text>
				  <view class="info-item ">
				  </view>
				</view>
				<view class="info-item">
				  <view class="info-item ">
				    <image 
				      class="imageFile" 
				  	v-for="(item,index) in monitorDetail.changeFrontImg.split(',')"  
				  	:src="item" 
				  	mode="scaleToFill"
				  	@click="previewImage(monitorDetail.changeFrontImg.split(','),index)"
				  	></image>
				  </view>
				</view>
				
				<view class="info-item textarea">
				  <text class="info-label">整改方法</text>
				  <!-- <input class="form-input" type="text" v-model="monitorDetail.changeMethod" placeholder="请输入" /> -->
				  <uv-textarea v-model="monitorDetail.changeMethod"placeholder="请输入内容"></uv-textarea>
				</view>
				<view class="info-item">
				  <text class="info-label">整改后照片</text>
				  <view class="info-item ">
				  <!-- <view class="imgfile-box" >
				  	<view class="imgfile wrap__preview" v-show="imgFile.length!==0" v-for="(item,index) in imgFile" :key="index">
				  		<image  class="imgfile" :src="item" mode="scaleToFill"></image>
				  		<view class="deletable" @click="deletePic(index)">
				  			<uv-icon name="close" size="10px" color="#fff"></uv-icon>
				  		</view>
				  	</view>
				  	<view v-show="imgList.length<5" class="plus-icon" @click="chooseImage">
				  		<uv-icon name="plus"></uv-icon>
				  	</view>
				  </view> -->
				  </view>
				</view>
				<view class="imgfile-box" >
					<view class="imgfile wrap__preview" v-show="imgFile.length!==0" v-for="(item,index) in imgFile" :key="index">
						<image  class="imgfile" :src="item" mode="scaleToFill"></image>
						<view class="deletable" @click="deletePic(index)">
							<uv-icon name="close" size="10px" color="#fff"></uv-icon>
						</view>
					</view>
					<!-- <image v-show="imgList.length!==0" v-for="item in imgList" class="imgfile" :src="item" mode="heightFix"></image> -->
					<view v-show="imgList.length<5" class="plus-icon" @click="chooseImage">
						<uv-icon name="plus"></uv-icon>
					</view>
				</view>
			</view>
			<view class="submit-button">
			    <button class="submit-btn" @click="submitForm">提交</button>
			</view>
			<view class="submit-margin">
				
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import NavBar from '@/components/NavBar/index.vue'
	import { BASEURL } from '@/utils/request.js'
	import {
	    updateMonitor,
		detailMonitor
	} from '@/utils/app.js'
	export default {
		components:{NavBar},
		data() {
			return {
				imgList:[],
				imgFile:[],
				tempFile:[],
				maxNum:5,
				monitorDetail: {
				  id: '',
				  checkDate: '',
				  changeName: '',
				  changeMobile: '',
				  dangerDesc: '',
				  dangerLevel: '',
				  changeMethod: '',
				  changeDate: '',
				  changeFrontImg: '',
				  changeAfterImg: '',
				}
			};
		},
		watch:{
			'imgList.length':function(newLength, oldLength){
				console.log(newLength, oldLength);
				this.maxNum =5- newLength
			}
			
		},
		onLoad(optoin) {
			console.log(optoin);
			// console.log(JSON.parse(optoin.data));
			// this.monitorDetail = JSON.parse(optoin.data)
			this.detailMonitorList(optoin.data)
			
			console.log(this.imgList);
		},
		methods:{
			previewImage(urls, current){
				uni.previewImage({
				  urls: urls,
				  current: urls[current]
				});
			},
			detailMonitorList(e){
				detailMonitor(e).then(res=>{
					console.log(res);
					if(res.code ==200){
						
						this.monitorDetail=res.data
						this.imgList = this.monitorDetail.changeAfterImg.split(',')
						this.imgFile = this.monitorDetail.changeAfterImg.split(',')
					}
				})
			},
			//删除附件
			deletePic(index) {
				// console.log(event.name,this.fileList,this[`fileList${event.name}`]);
			    this.imgFile.splice(index, 1)
				this.imgList.splice(index, 1)
			},
			
			submitForm(){
				this.monitorDetail.changeAfterImg = this.imgList.join(',')
				this.monitorDetail.type = 2
				if(!this.monitorDetail.changeAfterImg){
					uni.showToast({
					    title: '请添加整改后图片',
					    icon: 'none'
					});
					return 
				}
				if(!this.monitorDetail.changeMethod){
					uni.showToast({
					    title: '请输入整改方法',
					    icon: 'none'
					});
					return 
				}
				updateMonitor(this.monitorDetail).then(res=>{
					if(res.code==200){
						uni.showToast({
						    title: '成功',
						    icon: 'none'
						});
						uni.navigateBack()
					}else{
						uni.showToast({
						    title: '服务器错误',
						    icon: 'none'
						});
					}
				}).catch(err=>{
					uni.showToast({
					    title: '服务器错误',
					    icon: 'none'
					});
				})
			},
			// 选择图片
			chooseImage(){
				const that = this
				uni.chooseImage({
					count: this.maxNum, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: async (res)=> {
						console.log(res.tempFilePaths);
						that.tempFile=[...res.tempFilePaths]
						const token = uni.getStorageSync("token");
						that.tempFile.forEach(item=>{
							if(item.split(':')[0]!='file'){
								let p = plus.io.convertLocalFileSystemURL(item); 
								that.imgFile.push('file://'+  p)
								 uni.uploadFile({
								     url: `${BASEURL}/common/upload`, 
								      filePath:  'file://'+  p,
								 	  header: {
								 	   'Authorization': token,
								 	  },
								      name: 'file',
								      success: (uploadFileRes) => {
								          // console.log(JSON.parse(uploadFileRes.data).annexUrl);
								 		  this.imgList.push(JSON.parse(uploadFileRes.data).annexUrl)
								         // 获取上传服务器的地址 
								      }
								  });
							}else{
								that.imgFile.push(item)
								  uni.uploadFile({
								      url: `${BASEURL}/common/upload`, 
								       filePath:  item,
									   header: {
									    'Authorization': token,
									   },
								       name: 'file',
								       success: (uploadFileRes) => {
								           // console.log(uploadFileRes.data.annexUrl);
										   this.imgList.push(JSON.parse(uploadFileRes.data).annexUrl)
								          // 获取上传服务器的地址
								       }
								   });
							}
						
						})
						console.log(that.imgFile);
						console.log(result);
						
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
.list{
	height: 1450rpx;
	background-color: #fff;
	
	.info-list{
		padding: 0 30rpx;
		.info-item{
			display: flex;
			align-items: center;
			height: 112rpx;
			line-height: 112rxp;
			border-bottom: 1rpx solid #E7E7E7;
			font-size: 30rpx;
			.imageFile{
				width: 100rpx;
				height: 100rpx;
				margin-right: 10rpx;
			}
			.info-label{
				width: 162rpx;
				margin-right: 32rpx;
				color: rgba(0, 0, 0, 0.9);
			}
			
			.info-value{
				color: rgba(0, 0, 0, 0.85);
			}
		}
		.textarea{
			height: 200rpx;
		}
		.image-item{
			flex-wrap: wrap;
		}
		// .margin-bos{
		// 	height: 1px;
		// }
		
		.out {
			padding:4rpx 16rpx;
			font-size: 24rpx;
			color: #F53F3F;
		    background-color: #FFECE8;
			border-radius: 10rpx;
		}

		.in {
			padding:4rpx 16rpx;
			font-size: 24rpx;
		   background-color: #E8FFEA;
		   border-radius: 10rpx;
		}
	}
	.action-buttons{
		margin-top: 40rpx;
		display: flex;
		justify-content: center;
		
		
		.action-btn{
			padding: 24rpx 32rpx;
			font-size: 15px;
			font-weight: normal;
			color: #F53F3F;
			background-color: #FFECE8;
			border-radius: 60rpx;
		}
		.fuel-btn{
			color: #165DFF;
			background-color: #E8F3FF;
			margin-right: 20rpx;
		}
	}
}
.submit-button {
    // padding: 0 30px;
	width: 500rpx;
    margin-top: 80rpx;
    // margin-bottom: 20px;
    width: 100%;
	margin-bottom: 300rpx;
}
.submit-margin{
	height: 1px;
}

.submit-btn {
	width: 500rpx;
    height: 44px;
    border-radius: 22px;
    font-size: 14px;
    color: #4980FF;
    background-color: #F0F5FF;
    border-width: 0;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    // width: 100%;
}
.imgfile-box{
		display: flex;
	}
	.plus-icon{
		width: 100rpx;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1rpx solid #E6EAF3;
		border-radius: 10rpx;
	}
	.imgfile{
		height: 100rpx;
		width: 100rpx;
		margin-right: 10rpx;
	}
	.wrap__preview{
		position: relative;
	}
	.deletable{
		position: absolute;
		top: 0;
		right: 0;
		width: 28rpx;
		height: 28rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom-left-radius: 100px;
		background-color: #373737;
	}
</style>
